const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    entry: {
        index: './src/javascripts/index.js',
        login: './src/javascripts/login.js',
        register: './src/javascripts/register.js'
    },
    output: {
        path: resolve(__dirname, 'dist/'),
        filename: 'js/[name].js'
    },
    module: {
        rules:[
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif)$/i,
                loader: 'url-loader',
                options: {
                    limit: 8*1024,
                    outputPath: './images/',
                    esModule: false
                }
                    
            },
            {
                test: /\.html$/i,
                // loader: 'html-withimg-loader'
                loader: 'html-loader',
                options: {
                    esModule: false
                }
            }
        ]
    },
    plugins: [
        htmlPlugin('index'),
        htmlPlugin('login'),
        htmlPlugin('register'),
        new MiniCssExtractPlugin({
            filename: './css/[name].css'
        })
    ],
    mode: 'development',
    devServer: {
        port: 8888,
        open: true,
        hot: true,
        openPage: 'html/login.html',
        proxy: {
            '/': {
                target: 'http://localhost:2036'
            }
        }
    }
}
function htmlPlugin(filename) {
    return new HtmlWebpackPlugin({
        template: `./src/html/${filename}.html`,
        filename: `./html/${filename}.html`,
        chunks: [filename]
    })
}